<template>
<app-layout>
	<view class="">
		<!-- 搜索 -->
		<view class="page-width">
			<app-search-for :placeholder="placeholder" :value="value" isemit @tosearch="tosearch"></app-search-for>
		</view>

		<view class="index-nav">
			<view class="app-index-nav dir-left-nowrap cross-center main-around">
				<view class="app-item" :class="item.id-1 == zhilve ? 'active' : ''" v-for="(item,index) in twonavs"
					:key="index" @click="changezh(item.id-1,item)">
					<text v-if="item.id-1 == zhilve">{{item.name}}</text>
					<image class="app-item-imgs" v-if="item.id-1 != zhilve && item.icon_url != ''" :src="item.icon_url">
					</image>
				</view>
			</view>
		</view>
		<!-- <view class="">
			<pa-swiper :list="pageList[106].subnav" name="icon_url"></pa-swiper>
		</view> -->
		<view class="" v-if="banners.length" style="margin: 0 12rpx;">
			<app-swiper width="96" room effect3d effect3dNextMargin="242" :list="banners" mode="rect" name="icon_url"
				:itemStyle="itemStyle" :height="328" :autoplay="false" ref="bannereff" imgMode="scaleToFill">
			</app-swiper>
		</view>
		<!-- 导航1 -->
		<view class="zhilione" v-if="navs && navs.length > 0 && zhilve == 0">
			<!-- 226-28 nextMargin="80rpx" -->
			<app-navigation-icon navHeight="188" navMargin="20rpx auto 0" iconRadius="0" :navs="navs"
				background="#f7f7f7" :scroll="true" columns="3" :imgStyle="imgstyle1" nextMargin="110rpx" :rows="1">
			</app-navigation-icon>
			<view class="climore" @click="jump(navsurl)">
				点击进入>>>
			</view>
		</view>
		<view class="" v-if="navs && navs.length > 0 && zhilve == 3">
			<!-- 226-28 -->
			<app-navigation-icon navHeight="198" navMargin="20rpx auto 0" iconRadius="0" :navs="navs"
				background="#f7f7f7" :scroll="true" columns="4" :imgStyle="imgstyle3" nextMargin="80rpx" :rows="1">
			</app-navigation-icon>
			<view class="climore" @click="jump(navsurl)">
				点击进入>>>
			</view>
		</view>
		<view class="" v-if="navs && navs.length > 0 && (zhilve == 2 || zhilve == 1)">
			<!-- 226-20 -->
			<app-navigation-icon navHeight="206" navMargin="20rpx auto 0" iconRadius="0" :navs="navs"
				background="#f7f7f7" :scroll="true" columns="4" :imgStyle="imgstyle3" nextMargin="80rpx" :rows="2">
			</app-navigation-icon>
			<view class="climore" @click="jump(navsurl)">
				点击进入>>>
			</view>
		</view>


		<view class="dir-left-nowrap cross-top clitop" v-if="snavs1 != ''">
			<!--  style="width: 150rpx;font-size: 24rpx;text-align: center;padding-top: 80rpx;" -->
			<view class="left-ti">
				<!-- <view class="allti oneti">{{snavs1.name}}</view> -->
				<image class="wholeimg" :src="snavs1.icon_url" mode="aspectFit"></image>
				<!-- <view class="material">{{snavs1.params.describe}}</view> -->
			</view>
			<view class="righti">
				<!-- 230-28 换 172  allwidth="560" 换为 640 70rpx换90 -->
				<app-navigation-icon :isShow="false" navimg="icon_url" allwidth="640" nextMargin="80rpx"
					:autoplay="false" navHeight="212" navMargin="0 auto" :navs="snavs1.subnav" background="#FFFFFF"
					itembackground="#FFFFFF" :scroll="true" :columns="3" :imgStyle="imgstyle2" :rows="1"
					@btclick="tozhibo" :appItemStyle="appItemStyle">
				</app-navigation-icon>
			</view>
		</view>
		<view class="climore backcolor" @click="jump(snavs1.url)" v-if="snavs1 != ''">
			点击更多>>>
		</view>
		<view class="dir-left-nowrap cross-top clitop" v-if="snavs2 != ''">
			<!--  style="width: 150rpx;font-size: 24rpx;text-align: center;padding-top: 80rpx;" -->
			<view class="left-ti">
				<!-- <view class="allti twoti">{{snavs2.name}}</view> -->
				<image class="wholeimg" :src="snavs2.icon_url" mode="aspectFit"></image>
				<!-- <view class="material">{{snavs2.params.describe}}</view> -->
			</view>
			<view class="righti">
				<!-- 230-28 80rpx换90 -->
				<app-navigation-icon :isShow="false" navimg="icon_url" allwidth="640" nextMargin="80rpx"
					:autoplay="false" navHeight="212" navMargin="0 auto" :navs="snavs2.subnav" background="#FFFFFF"
					itembackground="#FFFFFF" :scroll="true" :columns="3" :imgStyle="imgstyle2" :rows="1"
					@btclick="tozhibo">
				</app-navigation-icon>
			</view>
		</view>
		<view class="climore backcolor" @click="jump(snavs2.url)" v-if="snavs2 != ''">
			点击更多>>>
		</view>
		<view class="dir-left-nowrap cross-top clitop" v-if="snavs3 != ''">
			<view class="left-ti">
				<!-- <view class="allti thrti">{{snavs3.name.substring(0,3)}}<br />
					<text>{{snavs3.name.substring(3)}}</text>
				</view> -->
				<!-- <view class="allti thrti">{{snavs3.name1?snavs3.name1:snavs3.name}}<br />
					<text v-if="snavs3.name2">{{snavs3.name2}}</text>
				</view> -->
				<image class="wholeimg" :src="snavs3.icon_url" mode="aspectFit"></image>
				<!-- <view class="material">{{snavs3.params.describe}}</view> -->
			</view>
			<view class="righti">
				<!-- 230-28 172 -->
				<app-navigation-icon :isShow="false" navimg="icon_url" allwidth="640" nextMargin="80rpx"
					:autoplay="false" navHeight="212" navMargin="0 auto" :navs="snavs3.subnav" background="#FFFFFF"
					itembackground="#FFFFFF" :scroll="true" :columns="3" :imgStyle="imgstyle2" :rows="1"
					@btclick="toentity">
				</app-navigation-icon>
			</view>
		</view>
		<view class="climore backcolor" @click="jump(snavs3.url)" v-if="snavs3 != ''">
			点击更多>>>
		</view>
		<view class="" v-if="navstwo.length > 0 && zhilve == 1">
			<!-- 226-28 -->
			<app-navigation-icon navHeight="198" navMargin="20rpx auto" :navs="navstwo" background="#f7f7f7"
				:scroll="true" columns="4" :imgStyle="imgstyle3" nextMargin="80rpx" :rows="1">
			</app-navigation-icon>
			<view class="climore" @click="jump(navstwourl)">
				点击进入>>>
			</view>
		</view>
		<view class="" :class="zhilve == 3 ? 'dir-left-nowrap cross-top' : ''">
			<!-- <view class="" style="writing-mode: vertical-lr;width: 54rpx;">下拉找到自己喜欢的</view>
			<view class="" style="width: 6rpx;height: 300rpx;background-color: #CDCDCD;"></view> -->
			<!-- morelive -->
			<view class="movetop" v-if="zhilve == 0">
				<u-liveware :value="list"></u-liveware>
				<!-- <view class="dir-left-nowrap cross-center morelive-item" v-for="(item,index) in list" :key="index"
					@click="tozhibo(item)">
					<view class="live-image">
						<image class="live-img" :src="item.cover_img || item.pic_url" mode="widthFix"></image>
						<view v-if="item.live_status === 101" class="tag-box tag-box-3">
							<view class="text">
								<image class="live-icon" src="/static/image/icon/liveing.png"></image>
								<span>{{item.status_text}}</span>
							</view>
						</view>
						<view v-else-if="item.live_status === 102" class="tag-box tag-box-1">
							<view class="text">
								<view class="round"></view>
								<span>{{item.status_text}}</span>
							</view>
							<view class="text-time">{{item.text_time}}</view>
						</view>
						<view v-else-if="item.live_status === 103" class="tag-box tag-box-2">
							<view class="text">
								<view class="round"></view>
								<span>{{item.status_text}}</span>
							</view>
						</view>
						<view v-else class="tag-box tag-box-3">
							<view class="text">
								<view class="round"></view>
								<span>{{item.status_text}}</span>
							</view>
						</view>
					</view>

					<view class="live-commodity" v-if="item.goods.length > 0">
						<view class="live-img">
							<image class="live-img" :src="item.goods[0].cover_img" mode=""></image>
						</view>
					</view>
					<view class="more-discount">
						还有更多优惠...
					</view>
				</view> -->
			</view>
			<view class="morelive list-one" style="padding-top: 24rpx;" v-if="zhilve == 3">
				<view class="list-one-item" v-for="(item,index) in list" :key="index" @click="tozhibo(item)">
					<view class="live-image">
						<image class="image" :src="item.cover_img || item.pic_url" mode="aspectFill"></image>
						<!-- <view v-if="item.live_status === 101" class="tag-box tag-box-3">
							<view class="text">
								<image class="live-icon" src="/static/image/icon/liveing.png"></image>
								<span>{{item.status_text}}</span>
							</view>
						</view>
						<view v-else-if="item.live_status === 102" class="tag-box tag-box-1">
							<view class="text">
								<view class="round"></view>
								<span>{{item.status_text}}</span>
							</view>
							<view class="text-time">{{item.text_time}}</view>
						</view>
						<view v-else-if="item.live_status === 103" class="tag-box tag-box-2">
							<view class="text">
								<view class="round"></view>
								<span>{{item.status_text}}</span>
							</view>
						</view>
						<view v-else class="tag-box tag-box-3">
							<view class="text">
								<view class="round"></view>
								<span>{{item.status_text}}</span>
							</view>
						</view> -->
						<view v-if="item.status == 1" class="tag-box tag-box-1">
							<view class="text">
								<view class="round"></view>
								<span>抢货预告</span>
							</view>
							<view class="text-time">{{item.start_at}}-{{item.end_at}}</view>
						</view>
						<view v-else-if="item.status == 2" class="tag-box tag-box-2">
							<view class="text">
								<view class="round"></view>
								<span>正在抢货</span>
							</view>
						</view>
						<view v-else class="tag-box tag-box-3">
							<view class="text">
								<view class="round"></view>
								<span>珠宝介绍回放</span>
							</view>
						</view>
					</view>
					<view class="u-line-2">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="" v-if="zhilve == 1">
				<!-- <view class="list-one-item" v-for="(item,index) in list" :key="index" @click="jump(item.url)">
					<view class="live-image">
						<image class="image" :src="item.icon_url" mode="aspectFill"></image>
					</view>
					<view class="u-line-2">
						{{item.name}}
					</view>
				</view> -->
				<u-indexware :value="list"></u-indexware>
			</view>
			<view class="movetop" v-if="zhilve == 2">
				<view class="index-navs" v-if="list.length > 0">
					<view class="app-index-navs dir-left-nowrap cross-center">
						<scroll-view scroll-x class="app-scroll" :scroll-into-view="'clasfy'+cureid"
							scroll-with-animation>
							<view class="cross-center">
								<view class="app-item" :id="'clasfy'+index" v-for="(item,index) in list" :key="item.id"
									:class="index == cureid ? 'active':''" @click="switc(index)">
									{{item.name}}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<scroll-view class="cate" @scroll="scroll" scroll-y="true" :scroll-into-view="'cate-'+cure"
					scroll-with-animation v-if="list.length > 0">
					<view v-for="(item,index) in list" :key="index" :id="'cate-'+index">
						<view class="cate-title">
							<text>{{item.name}}</text>
						</view>
						<view class="list-one" v-if="index % 2 == 0">
							<view class="list-one-item" v-for="(child,childindex) in item.subnav" :key="childindex"
								@click="jump(child.url)" v-if="childindex < 4">
								<image class="image" :src="child.icon_url" mode=""></image>
								<text class="u-line-2">{{child.name}}</text>
							</view>
						</view>
						<view class="list-two" v-else>
							<view class="list-two-item" v-for="(child,childindex) in item.subnav" :key="childindex"
								@click="jump(child.url)" v-if="childindex < 4">
								<image class="image" :src="child.icon_url" mode=""></image>
								<text class="list-two-title u-line-5">{{child.name}}</text>
							</view>
						</view>
						<view class="nowmoew" @click="morelist(item.id,item.name,index)" v-if="item.subnav.length>0">
							查看更多>>>
						</view>
						<view class="app-no-goods" v-else>
							<app-no-goods is_image="1" background="#fff"></app-no-goods>
						</view>
					</view>
					<view style="height: 36rpx;"></view>
				</scroll-view>
			</view>
		</view>
		<!-- 成为合伙人 -->
		<!-- <view class="bepartner" v-if="pageList[107]">
			<view class="bepartnerone" v-for="(item,index) in pageList[107].subnav" :key="index"
				@click="jump(item.url)">
				<view class="image">
					<image class="img" :src="item.icon_url">
					</image>
				</view>
				<view class="title u-line-1">
					{{item.name}}
				</view>
			</view>
		</view> -->
		<!-- 猜你喜欢 -->
		<!-- <view class="guess" v-if="pageList[108]" @click="jump(pageList[108].url)"> -->
		<!-- <view class="guessit">
				{{pageList[108].name}}
			</view> -->
		<!-- <image class="image" :src="pageList[108].icon_url" mode=""></image>
		</view> -->
		<!-- 时间三块 -->
		<!-- <view class="superiall">
			<view class="superior" v-for="(item,index) in videolist" :key="index" v-if="index==0" @click="tolist(item)">
				<image class="image" :src="item.pic_url" mode="widthFix"></image>
				<view class="status" v-if="item.status == 0">
					无货可抢
					<text class="notice">今日无货</text>
				</view>
				<view class="status" v-if="item.status == 1">
					{{item.start_at}}-{{item.end_at}}
					<text class="notice">抢货预告</text>
				</view>
				<view class="status" v-if="item.status == 2">
					{{item.start_at}}-{{item.end_at}}
					<text class="notice">正在抢货</text>
				</view>
				<view class="status" v-if="item.status == 3">
					已抢光
					<text class="notice" style="width: 187rpx;">珠宝介绍回放</text>
				</view>
				<image class="play" :src="imgprefix+'/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png'">
				</image>
			</view>
			<view class="superiordou">
				<view class="supertwo" v-for="(item,index) in videolist" :key="index" v-if="index>0 && index<3"
					@click="tolist(item)">
					<image class="image" :src="item.pic_url" mode="widthFix"></image>
					<view class="status" v-if="item.status == 0">
						无货可抢
						<text class="notice">今日无货</text>
					</view>
					<view class="status" v-if="item.status == 1">
						{{item.start_at}}-{{item.end_at}}
						<text class="notice">抢货预告</text>
					</view>
					<view class="status" v-if="item.status == 2">
						{{item.start_at}}-{{item.end_at}}
						<text class="notice">正在抢货</text>
					</view>
					<view class="status" v-if="item.status == 3">
						已抢光
						<text class="notice" style="width: 187rpx;">珠宝介绍回放</text>
					</view>
					<view class="title">
						{{item.title}}
					</view>
					<image class="play"
						:src="imgprefix+'/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png'"></image>
				</view>
			</view>
		</view> -->
		<!-- banner -->
		<!-- <view v-if="pageList[106]" style="width: 686rpx;margin: 20rpx auto 32rpx;border-radius: 32rpx;">
			<app-swiper :list="pageList[106].subnav" borderRadius="32" mode="rect" name="icon_url" :height="242"
				:autoplay="true">
			</app-swiper>
		</view> -->
		<!-- 列表循环 -->
		<!-- <view class="">
			<u-gospeedware :value="videolist" @click="topage"></u-gospeedware>
		</view> -->
		<!-- <view class="beloop" :style="{height:beHeight+'rpx'}">
			<view class="belooprow" :style="item.style" v-for="(item,index) in blendList" :key="index"
				@click="jump(item.content != undefined ? '/pages/goods/vi?id='+ item.id : item.url)"
				v-if="item.length != 0">
				<view class="image" v-if="item.content != undefined">
					<image class="img" :lazy-load="true" :src="item.pic_url" mode="widthFix"></image>
					<view class="no-goods" v-if="item.status == 0">
						<view class="no-title">
							今日无货
						</view>
					</view>
					<view class="status" v-if="item.status == 1">
						{{item.start_at}}-{{item.end_at}}
						<text class="notice">抢货预告</text>
					</view>
					<view class="status" v-if="item.status == 2">
						<text class="notice">正在抢货</text>
					</view>
					<view class="no-goods" v-if="item.status == 3">
						<view class="no-title">
							货已抢光
						</view>
					</view>
				</view>
				<view class="image" v-else>
					<image class="img" :src="item.icon_url" mode="widthFix"></image>
				</view>
				<view class="title u-line-2">
					{{item.name || item.title}}
				</view>
			</view>
		</view> -->
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="../../static/image/icon/back-top.png"></image>
		</view>
		<!-- 悬浮框 免费得金币 -->
		<view class="">
			<tastlist flotop="55%" floleft="0" ref="task"></tastlist>
		</view>
		<!-- 9.22 金币 -->
		<!-- <view class="touch" v-if="available">
			<browe ref="countdown" :available="available" :time="time" :receive="receive" @finish="onFinish"
				:goldcoin="5">
				<template v-slot="{day, hour, minute, second, remain, time}"></template>
			</browe>
		</view> -->
		<app-tab-bar></app-tab-bar>
	</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	
	import appTabBar from "../../components/basic-component/app-tab-bar/app-tab-bar.vue"
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue'
	import appNavigationIcon from '../../components/page-component/app-navigation-icon/app-navigation-icon.vue'
	import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue'
	import paSwiper from '../../components/page-component/app-swiper/swiper.vue'
	import uGospeedware from '../../components/page-component/u-goods-list/u-gospeed-ware.vue';
	import uIndexware from '../../components/page-component/u-goods-list/u-indexware.vue';
	import uLiveware from '../../components/page-component/u-goods-list/u-liveware.vue';

	import tastlist from '../../pages/tasklist/tasklist.vue'
	// import browe from '../../components/browe/browe.vue'

	let loadcom = false
	// 9.22
	// var timee;

	export default {
		data() {
			return {
				// 11.22
				twonavs: [{
						id: 1,
						name: '精选直播'
					},
					{
						id: 2,
						name: '主播',
						img: '/static/image/float.png',
						// url: '/pages/anchor/list'
					},
					{
						id: 3,
						name: '品类主播',
						img: '/static/image/float.png',
						// url: '/pages/anchor/list'
					},
					{
						id: 4,
						name: '好货快快抢',
						img: '/static/image/float.png'
					}
				],
				itemStyle: "width:484rpx",
				imgstyle1: "width: 192rpx;height: 150rpx",
				// imgstyle2: "width: 140rpx;height: 140rpx;border: 1rpx solid #a96536;border-radius: 12rpx;",
				imgstyle2: "width: 180rpx;height: 180rpx;border: 1rpx solid #a96536;border-radius: 12rpx;",
				imgstyle3: "width: 160rpx;height: 160rpx;",
				appItemStyle: "" /*"appitemstyle"*/ ,
				lipage: 1,
				list: [],
				livelist: [],
				/** zhilve
				 * 0: 直播
				 * 1 主播
				 * 2 品类主播
				 * 3 好货快快抢
				 */
				zhilve: 0,
				// padding-right:24rpx;overflow:hidden;
				// 11.29 zhushi
				// itemStyle: "padding-right:24rpx;",
				// dzStyle: "width:200rpx;height:200rpx",
				value: {
					background: `#F7F7F7`,
					color: '#FFFFFF',
					placeholder: '搜索',
					radius: 15,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				placeholder: '搜索',
				navs: [],
				navsurl: '',
				navstwo: [],
				navstwourl: '',
				banners: [],
				snavs1: '',
				snavs2: '',
				snavs3: '',
				sup_status: 1,
				page: 1,
				limit: 10,
				blendList: [],
				videolist: [],
				pageList: [],
				currtime: '',
				shatime: '',
				ehatime: '',
				boxHeight: [],
				beHeight: '',
				page_count: 1,
				total_count: 1,
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,

				imgprefix: this.$siteInfo.imgroot,

				/* 移动所需参数 倒计时 9.22 */
				// flag: false,
				// time: 15000,
				// receive: false,
				// available: false,
				// 9.27 金币数量
				goldsnum: 2,

				// 品类主播
				cure: 0,
				cureid: 0,
			}
		},
		onLoad(options) {
			// 11.29
			// this.$refs.givedz.clear()
			// 9.22 是否从任务列表 跳转得
			if (options.available) {
				this.available = options.available
			}
			if (options.goldsnum) {
				this.goldsnum = options.goldsnum
			}
			this.zhilve = options.zhilve || 0
			// console.log(this.zhilve);

			// this.getPlayback()
			this.navs = []
			this.banners = []
			this.list = []
			this.videolist = []
			this.livelist = []

			this.allReq(19)
			if (this.zhilve == 0) {
				this.placeholder = '搜索实体店'
				this.allReq(79) // 导航
				this.allReq(81) // banner
				this.navsReq(78)
				this.getList()
			} else if (this.zhilve == 3) {
				this.placeholder = '搜索好货快快抢视频'
				this.allReq(80) // 导航
				this.allReq(106) // banner
				this.navsReq(105)
				this.appPort()
			} else if (this.zhilve == 1) {
				this.placeholder = '搜索主播'
				// uni.navigateTo({
				// 	url: '/pages/tasklist/tasklist'
				// })
				this.allReq(143) // 导航
				this.allReq(142) // banner
				this.navsReq(17)
				this.allReq(146) // 导航2
				this.allReq(147) // 多列表
				// this.appPort()
			} else if (this.zhilve == 2) {
				this.placeholder = '搜索品类主播'
				// uni.navigateTo({
				// 	url: '/pages/tasklist/tasklist'
				// })
				this.allReq(211) // 导航
				this.allReq(210) // banner
				this.navsReq(20)
				this.navsReq(18)
				this.snavs1 = ''
				this.snavs2 = ''
				this.snavs3 = ''
			}

			this.page = 1
			this.page_count = 1
			this.blendList = []
			// 9.9
			// this.request()
			// this.appPort()
			// this.request()
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// this.imgprefix = this.$siteInfo.imgroot
		},
		// 9.29 离开页面改变 弹窗显示状态
		onUnload() {
			getApp().globalData.firstapplet = false
			// this.$refs.givedz.clear()
		},
		onHide() {
			// this.$refs.givedz.clear()
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;

			// 9.22 滑动 得金币
			// console.log('开始滚动');
			// if (this.available) {
			// 	clearTimeout(timee);
			// 	this.flag = false;
			// 	this.$refs.countdown.start()
			// 	timee = setTimeout(() => {
			// 		// console.log('结束滚动');
			// 		this.$refs.countdown.pause()
			// 		this.flag = true;
			// 	}, 500);
			// }
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				userInfo: state => state.user.info
			})
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/gospeed/index',
				params: {
					zhilve: 0
				}
			});
		},
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				path: '/pages/gospeed/index',
				params: {
					zhilve: 0
				}
			});
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
			zhilve(n, v) {
				// console.log(n, v);
				// console.log(this.livelist);
				if (n == 0) {
					this.list = []
					this.list = this.livelist
				} else if (n == 3) {
					this.list = []
					this.list = this.videolist
				}
				// console.log(this.list);
			}
		},
		/* onShow() {
			// this.page = 1
			// this.page_count = 1
			// this.blendList = []
			// this.request()
			// if (this.$refs.task.show || this.$refs.task.isshow) {
			// 	// 9.26 调用父组件的方法 免费得金币
			// 	this.$refs.task.themet.forEach((item) => {
			// 		if (item.type || item.type == 0) {
			// 			this.$refs.task.tasksu(item)
			// 		}
			// 	})
			// }
			// 9.27 调用父组件的方法 免费得金币
			// if (this.$refs.task.show || this.$refs.task.isshow) {
			// 	// 9.29 将showMo方法改为judgetask
			// 	this.$refs.task.judgetask()
			// }

			// this.list = []
			// this.livelist = []
			// this.videolist = []
			// this.page = 1
			// this.page_count = 1
			// this.zhilve = 0
			// this.banners = []
			// this.allReq(79) // 导航
			// this.allReq(81) // banner
			// this.getList()
		}, */
		onPullDownRefresh() {
			// this.allReq(2)
			// this.allReq(4)
			// this.navsReq()
			// this.livelist = []
			// this.videolist = []
			// this.blendList = []
			// this.page = 1
			// this.boxHeight = []
			// this.beHeight = ''
			// this.appPort()
			// 9.9
			// this.request()
			uni.stopPullDownRefresh()
			// this.zhilve = index
			this.navs = []
			this.banners = []
			this.list = []
			this.livelist = []
			this.videolist = []
			this.page = 1
			this.page_count = 1
			this.snavs1 = ''
			this.snavs2 = ''
			this.snavs3 = ''
			// this.$refs.bannereff.current = 0
			if (this.zhilve == 0) {
				this.allReq(79) // 导航
				this.allReq(81) // banner
				this.navsReq(78)
				this.getList()
			} else if (this.zhilve == 3) {
				this.allReq(80) // 导航
				this.allReq(106) // banner
				this.navsReq(105)
				this.appPort()
			} else if (this.zhilve == 1) {
				// uni.navigateTo({
				// 	url: '/pages/tasklist/tasklist'
				// })
				this.allReq(143) // 导航
				this.allReq(142) // banner
				this.navsReq(17)
				this.allReq(146) // 导航2
				this.allReq(147) // 多列表
			} else if (this.zhilve == 2) {
				// uni.navigateTo({
				// 	url: '/pages/tasklist/tasklist'
				// })
				this.snavs1 = ''
				this.snavs2 = ''
				this.snavs3 = ''
				this.allReq(211) // 导航
				this.allReq(210) // banner
				this.navsReq(20)
				this.navsReq(18)
			}
		},
		onReachBottom() {
			if (loadcom) {
				if (this.zhilve == 0) {
					if (this.page < this.page_count) {
						this.page++;
						// 9.9
						// this.request()
						this.getList()
					}
				} else if (this.zhilve == 3) {
					if (this.page < this.page_count) {
						this.page++;
						// 9.9
						// this.request()
						this.appPort()
					}
				} else if (this.zhilve == 1) {
					if (this.page < this.page_count) {
						this.page++;
						// 9.9
						// this.request()
						this.allReq(147)
					}
				}
			}
			// this.$storage.setStorageSync('gospeedLoop', this.blendList)
		},
		components: {
			appSearchFor,
			appNavigationIcon,
			appSwiper,
			uGospeedware,
			tastlist,
			paSwiper,
			uIndexware,
			uLiveware,
			"app-tab-bar":appTabBar
			// givethe,
			// giveigft
			// browe
		},
		methods: {
			tosearch() {
				uni.navigateTo({
					url: '/pages/gospeed/search?zhilive=' + this.zhilve
				})
			},
			// 品类直播
			morelist(id, name, index) {
				let url = '/pages/gospeed/category?zhilve=2&cateid=' + id
				// if (this.available) {
				// 	url = url + '&available=true'
				// }
				uni.navigateTo({
					url: url
				})
			},
			switc(index) {
				this.cure = index
				this.cureid = index
			},
			scroll(e) {
				let scrollTop = e.detail.scrollTop
				for (let i = 0; i < this.nav_list.length; i++) {
					if (this.nav_list[i].top <= scrollTop && scrollTop < this.nav_list[i].bottom) {
						this.cureid = i
					}
				}
			},
			calcSize() {
				let top = 0
				let tem = 0
				let bottom = 0
				for (let i = 0; i < this.nav_list.length; i++) {
					let view = uni.createSelectorQuery().in(this).select("#cate-" + i);
					view.boundingClientRect(res => {
						top = tem
						bottom = tem + res.height;
						this.nav_list[i].top = top
						this.nav_list[i].bottom = bottom
						tem = bottom
					}).exec();
				}
			},
			// 12.15
			tomorelist() {
				uni.navigateTo({
					url: '/pages/gospeed/category'
				})
			},
			// 11.23
			changezh(index, item) {
				/* if (item.url) {
					uni.navigateTo({
						url: item.url
					})
					return
				} */
				if (this.zhilve == index) {
					return
				}
				this.navs = []
				this.banners = []
				this.list = []
				this.livelist = []
				this.videolist = []
				this.page = 1
				this.page_count = 1
				this.zhilve = index
				this.snavs1 = ''
				this.snavs2 = ''
				this.snavs3 = ''
				// console.log(this.$refs.bannereff);
				// this.$refs.bannereff.current = 0
				if (this.zhilve == 0) {
					this.placeholder = '搜索实体店'
					// this.allReq(2) // 导航
					this.allReq(79) // 导航
					this.allReq(81) // banner
					this.navsReq(78)
					this.getList()
				} else if (this.zhilve == 3) {
					this.placeholder = '搜索好货快快抢视频'
					// this.allReq(2) // 导航
					this.allReq(80) // 导航
					this.allReq(106) // banner
					this.navsReq(105)
					this.appPort()
				} else if (this.zhilve == 1) {
					this.placeholder = '搜索主播'
					// uni.navigateTo({
					// 	url: '/pages/tasklist/tasklist'
					// })
					// this.allReq(2) // 导航
					this.allReq(143) // 导航
					this.allReq(142) // banner
					this.navsReq(17)
					this.allReq(146) // 导航2
					this.allReq(147) // 多列表
				} else if (this.zhilve == 2) {
					this.placeholder = '搜索品类主播'
					// uni.navigateTo({
					// 	url: '/pages/tasklist/tasklist'
					// })
					this.snavs1 = ''
					this.snavs2 = ''
					this.snavs3 = ''
					// this.allReq(2) // 导航
					this.allReq(211) // 导航
					this.allReq(210) // banner
					this.navsReq(20)
					this.navsReq(18)
				}
			},
			tozhibo(item) {
				if (this.zhilve == 0) {
					// console.log(99);
					let self = this;
					let userId = this.userInfo ? this.userInfo.options.user_id : 0;
					let customParams = {
						user_id: userId
					}; // 开发者在直播间页面路径上携带自定义参数
					// console.log(
					// 	`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${item.roomid}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
					// );
					uni.navigateTo({
						url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${item.roomid}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
					})
				} else /* if (this.zhilve == 3)*/ {
					// 主播直播
					this.tolist(item)
				}
			},
			// getPlayback() {
			// 	let self = this;
			// 	self.$request({
			// 		url: self.$api.live.playback,
			// 		// method: 'POST',
			// 		data: {
			// 			"action": "get_replay",
			// 			"room_id": 7,
			// 			"start": 0,
			// 			"limit": 10
			// 		}
			// 	}).then(response => {
			// 		console.log(response);
			// 	}).catch(() => {});
			// },
			getList() {
				loadcom = false
				let self = this;
				if (!self.is_show_load) {
					self.$showLoading({
						text: '加载中...'
					});
				}
				self.$request({
					url: self.$api.live.index,
					data: {
						page: self.page,
						live_type: 1
					},
				}).then(response => {
					loadcom = true
					// console.log(response);
					self.$hideLoading();
					self.is_show_load = false;
					if (response.code === 0) {
						let {
							list
						} = response.data;
						if (self.page != 1) {
							self.livelist = self.livelist.concat(list)
						} else {
							self.livelist = list;
						}
						// console.log(self.page_count);
						// self.page = list.length ? self.page + 1 : self.page;
						if (list.length === 0 && self.livelist.length != 0) {
							self.is_show_hint = true;
						}
						if (self.zhilve == 0) {
							self.list = self.livelist
							self.page_count = response.data.pageCount
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000,
						});
					}
				}).catch(() => {
					self.is_show_load = false;
					self.$hideLoading();
				});
			},
			// 9.22
			// onFinish() {
			// 	this.receive = true
			// },

			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(item, id) {
				if (item == '/' || item == 'javascript:;' || item == '') {
					return
				}
				if (item.toString().indexOf('/pages/gospeed/index') != -1) {
					uni.redirectTo({
						url: item
					})
					return
				}
				if (item == '/pages/bepartner/index') {
					if (this.userInfo.vdian_id != null) {
						this.appStatus(this.userInfo.vdian_id)
						return;
					}
				}
				if (id) {
					if (url.indexOf('?') != -1) {
						item = item + '&id=' + id
					} else {
						item = item + '?id=' + id
					}
				}
				uni.navigateTo({
					url: item
				})
			},
			tolist(item) {
				let url = '/pages/goods/vi?id=' + item.id
				if (this.available) {
					url = '/pages/goods/vi?id=' + item.id + '&available=true'
					if (this.goldsnum) {
						url = '/pages/goods/vi?id=' + item.id + '&available=true&goldsnum=' + this.goldsnum
					}
				}
				if (item.status != 1) {
					uni.navigateTo({
						url: url
					})
				}
			},
			toentity(item) {
				// console.log(item, '---------');
				uni.navigateTo({
					url: '/pages/entity/index'
				})
			},
			topage(item) {
				let url = '/pages/goods/vi?id=' + item.id
				if (this.available) {
					url = '/pages/goods/vi?id=' + item.id + '&available=true'
					if (this.goldsnum) {
						url = '/pages/goods/vi?id=' + item.id + '&available=true&goldsnum=' + this.goldsnum
					}
				}
				if (item.url == '/pages/bepartner/index') {
					if (this.userInfo.vdian_id != null) {
						this.appStatus(this.userInfo.vdian_id)
						return;
					}
				}
				if (item.content != undefined) {
					if (item.status != 1) {
						uni.navigateTo({
							url: url
						})
					}
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			appStatus(id) {
				let self = this
				let status = 0
				self.$request({
					url: self.$api.apply.store,
					data: {
						id: id
					},
					method: 'get',
				}).then(res => {
					if (res.data.review_status == 0) {
						self.status = 0
						uni.navigateTo({
							url: '/pages/bepartner/index'
						})
						return;
					} else if (res.data.review_status == 1) {
						self.status = 1
						uni.redirectTo({
							url: '/pages/store/mine/mine'
						});
						return;
					} else if (res.data.review_status == 2) {
						self.status = 2
						uni.navigateTo({
							url: '/pages/bepartner/index'
						})
						return;
					}
				}).catch(e => {

				})
			},
			listJump(id, list, stime, etime) {
				/* let ctime = this.$utils.datetime()
				let sqtime = stime.substr(0, 10)
				let shtime = stime.substr(11).replaceAll(':', '')
				let eqtime = etime.substr(0, 10)
				let ehtime = etime.substr(11).replaceAll(':', '')
				this.shatime = stime.substr(11, 5)
				this.ehatime = etime.substr(11, 5)
				let cqtime = ctime.substr(0, 10)
				let chtime = ctime.substr(11).replaceAll(':', '') */
				// 当前时间
				let catime = new Date()
				// 开始时间
				let satime = new Date(stime.replaceAll('-', '/'))
				// 结束时间
				let eatime = new Date(etime.replaceAll('-', '/'))
				/* if (list != '') {
					if (satime > catime) {
						this.sup_status = 1
					} else if (satime <= catime && catime < eatime) {
						this.sup_status = 2
					} else if (catime >= eatime) {
						this.sup_status = 3
					}
					// if (sqtime != cqtime) {
					// 	this.sup_status = 0
					// } else if (sqtime == cqtime) {
					// 	if (chtime < shtime) {
					// 		this.sup_status = 1
					// 	} else if (chtime > shtime) {
					// 		if (chtime < ehtime) {
					// 			this.sup_status = 2
					// 		} else {
					// 			this.sup_status = 3
					// 		}
					// 	}
					// }
				} else {
					this.sup_status = 0
				} */
				if (satime > catime) {
					this.sup_status = 1
				} else if (satime <= catime && catime < eatime) {
					/* if (list.length != 0) {
						this.sup_status = 2
					} else {
						this.sup_status = 3
					} */
					let salist = []
					salist = list.filter((itm, index) => {
						return itm.goods_stock != 0
					})
					if (salist.length == 0) {
						this.sup_status = 3
					} else {
						this.sup_status = 2
					}
				} else if (catime >= eatime) {
					this.sup_status = 3
				}
				return this.sup_status
				// return this.sup_status
			},
			allReq(pid) {
				let pdata = {
					pid: pid,
					status: 1,
					limit: 200
				}
				if (pid == 147) {
					pdata = {
						pid: pid,
						status: 1,
						page: this.page,
						limit: 10
					}
				}
				this.$request({
					url: this.$api.navs.list,
					data: pdata
				}).then((res) => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						if (pid == 19) {
							this.twonavs = res.data.list
							this.twonavs.forEach((item, index) => {
								item.id = index + 1
							})
						}
						if (pid == 2) {
							this.navs = res.data.list
							this.navstwo = res.data.list
						}
						if (this.zhilve == 0) {
							if (pid == 79) {
								this.navs = res.data.list
							} else if (pid == 81) {
								this.banners = res.data.list
							}
						} else if (this.zhilve == 3) {
							if (pid == 80) {
								this.navs = res.data.list
							} else if (pid == 106) {
								this.banners = res.data.list
							}
						} else if (this.zhilve == 1) {
							if (pid == 143) {
								this.navs = res.data.list
							} else if (pid == 142) {
								this.banners = res.data.list
							} else if (pid == 146) {
								this.navstwo = res.data.list
							} else if (pid == 147) {
								this.page_count = res.data.pagination.page_count;
								this.list = this.list.concat(res.data.list)
							}
						} else if (this.zhilve == 2) {
							if (pid == 211) {
								this.navs = res.data.list
							} else if (pid == 210) {
								this.banners = res.data.list
							}
						}
					}
				}).catch(() => {

				})
			},
			navsReq(id) {
				this.$request({
					url: this.$api.navs.index,
					data: {
						id: id
					}
				}).then((res) => {
					// console.log(res);
					if (res.code === 0) {
						if (id == 20) {
							let list = res.data.list
							for (let i in list) {
								this.list.push(list[i]);
							}
							this.calcSize();
						}
						if (id == 78) {
							this.navsurl = res.data.list[79].url
							this.snavs1 = res.data.list[82]
							this.snavs2 = res.data.list[83]
							this.snavs3 = res.data.list[84]
							if (this.snavs3.name.indexOf('双熙堂') != -1) {
								this.snavs3.name1 = this.snavs3.name.substring(0, 3)
								this.snavs3.name2 = this.snavs3.name.substring(3)
							}
						} else if (id == 105) {
							this.navsurl = res.data.list[80].url
							this.snavs1 = res.data.list[109]
							this.snavs2 = ''
							this.snavs3 = res.data.list[113]
							if (this.snavs3.name.indexOf('双熙堂') != -1) {
								this.snavs3.name1 = this.snavs3.name.substring(0, 3)
								this.snavs3.name2 = this.snavs3.name.substring(3)
							}
						} else if (id == 17) {
							this.navsurl = res.data.list[143].url
							this.navstwourl = res.data.list[146].url
							this.snavs1 = res.data.list[144]
							this.snavs2 = ''
							this.snavs3 = res.data.list[145]
							if (this.snavs3.name.indexOf('双熙堂') != -1) {
								this.snavs3.name1 = this.snavs3.name.substring(0, 3)
								this.snavs3.name2 = this.snavs3.name.substring(3)
							}
						} else if (id == 18) {
							this.navsurl = res.data.list[211].url
							this.snavs1 = ''
							this.snavs2 = ''
							this.snavs3 = ''
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(() => {

				})
			},
			async request(status) {
				loadcom = false
				const res = await this.$request({
					url: this.$api.navs.mix,
					data: {
						pids: '22,47',
						page: this.page,
						limit: this.limit
					}
				});
				if (res.code === 0) {
					loadcom = true
					this.page_count = res.data.pagination.page_count;
					this.total_count = res.data.pagination.total_count;
					let listvideo = []
					let status = ''
					listvideo = listvideo.concat(res.data.list)
					listvideo = listvideo.filter(response => {
						let nes = response[0]
						status = this.listJump(nes.id, nes.goodslist, nes.start_at, nes.end_at)
						nes.start_at = nes.start_at.substr(11, 5)
						nes.end_at = nes.end_at.substr(11, 5)
						this.$set(nes, 'status', status);
						this.$set(nes, 'start_at', nes.start_at);
						this.$set(nes, 'end_at', nes.end_at);
						return nes
					})
					/* this.videolist = listvideo
					console.log(this.videolist); */
					// if(this.page == 1){
					// 	this.blendList = listvideo.flat()
					// }else{
					// 	this.blendList = this.blendList.concat(listvideo.flat())
					// }
					this.blendList = this.blendList.concat(listvideo.flat())
					this.blendList = this.blendList.filter(function(el) {
						return el.length !== 0;
					});
					uni.stopPullDownRefresh()
				} else {
					uni.stopPullDownRefresh()
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
			async appPort() {
				// 9.9修
				loadcom = false
				const res = await this.$request({
					url: this.$api.navs.mersq,
					data: {
						page: this.page,
						status: 1,
						limit: this.limit
					}
				});
				if (res.code === 0) {
					loadcom = true
					let listvideo = []
					let status = ''

					listvideo = res.data.list
					listvideo = listvideo.filter(response => {
						let nes = response
						status = this.listJump(nes.id, nes.goodslist, nes.start_at, nes.end_at)
						nes.start_at = nes.start_at.substr(11, 5)
						nes.end_at = nes.end_at.substr(11, 5)
						this.$set(nes, 'status', status);
						this.$set(nes, 'start_at', nes.start_at);
						this.$set(nes, 'end_at', nes.end_at);
						return nes
					})
					// console.log(listvideo);
					this.videolist = this.videolist.concat(listvideo)

					if (this.zhilve == 3) {
						this.list = this.videolist
						this.page_count = res.data.pagination.page_count;
						this.total_count = res.data.pagination.total_count;
					}
					uni.stopPullDownRefresh()
				} else {
					uni.stopPullDownRefresh()
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
				/* this.$request({
					url: this.$api.navs.mersq,
					data: {
						page: this.page,
						status: 1
					}
				}).then((res) => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						loadcom = true
						let listvideo = []
						let status = ''
						this.page_count = res.data.pagination.page_count;
						this.total_count = res.data.pagination.total_count;
						listvideo = res.data.list
						listvideo = listvideo.filter(response => {
							let nes = response
							status = this.listJump(nes.id, nes.goodslist, nes.start_at, nes.end_at)
							nes.start_at = nes.start_at.substr(11, 5)
							nes.end_at = nes.end_at.substr(11, 5)
							this.$set(nes, 'status', status);
							this.$set(nes, 'start_at', nes.start_at);
							this.$set(nes, 'end_at', nes.end_at);
							return nes
						})
						// console.log(listvideo);
						this.videolist = this.videolist.concat(listvideo)
					}
				}).catch(() => {
					uni.stopPullDownRefresh()
				}) */
			},
		}
	}
</script>

<style scoped lang="scss">
	.margin-top {
		padding-top: 24rpx;
	}

	.index-nav {
		width: #{750rpx};
		height: #{80rpx};
		// line-height: 80rpx;
		margin: 24rpx 0;
	}

	.app-index-nav {
		height: #{80rpx};
		width: #{750rpx};

		.app-item {
			display: inline-block;
			font-size: 28rpx;
			// font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			color: #353535;
			padding: 0 #{20rpx};
			line-height: #{56rpx};
			width: 180rpx;
			position: relative;

			.app-item-imgs {
				height: 80rpx;
				width: 100%;
			}

			&.active {
				// border: 1rpx solid #353535;
				// text-shadow: 0 0 18rpx #a96536;
				text-shadow: 0 -8rpx 6rpx #a96536,
					/*上*/
					6rpx -6rpx 6rpx #a96536,
					/*右上*/
					8rpx 0 6rpx #a96536,
					/*右*/
					6rpx 6rpx 6rpx #a96536,
					/*右下*/
					0 8rpx 6rpx #a96536,
					/*下*/
					-6rpx 6rpx 6rpx #a96536,
					/*左下*/
					-8rpx 0 6rpx #a96536,
					/*左*/
					-6rpx -6rpx 6rpx #a96536;
				color: #ffffff;
			}

			.app-item-imga {
				height: 56rpx;
			}

			.app-item-img {
				height: 56rpx;
				border: none;
				width: 56rpx;
			}
		}
	}

	.clitop {
		width: 726rpx;
		margin: 24rpx auto 0;
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
	}

	// 董事长推荐
	.left-ti {
		// margin-top: 24rpx;
		// padding-left: 12rpx;
		margin: 24rpx 12rpx 0;
		text-align: left;
		// width: 192rpx;
		width: 62rpx;

		.allti {
			font-size: 32rpx;
			font-weight: bold;
		}

		.oneti {
			color: #000000;
		}

		.twoti {
			color: #2a29da;
		}

		.thrti {
			text-align: center;
			color: #a96536;
		}

		.wholeimg {
			// width: 60rpx;
			// height: 70rpx;
			width: 62rpx;
			height: 164rpx;
		}

		.material {
			margin-top: 12rpx;
			font-size: 25rpx;
			color: #d1d1d1;
		}
	}

	.righti {
		// width: 520rpx;
		width: 650rpx;
		margin-top: 24rpx;
	}

	.zhilione {
		width: 726rpx;
		margin: 0 auto;
	}

	.climore {
		width: 726rpx;
		// margin: 0 auto 32rpx;
		// margin: 0 auto 24rpx;
		margin: 0 auto;
		// padding: 32rpx 12rpx 20rpx;
		padding: 12rpx;
		font-size: 26rpx;
		font-weight: bold;
		text-align: right;
		border-radius: 0 0 24rpx 24rpx;

		&.backcolor {
			background-color: #FFFFFF;
		}
	}

	.morelive {
		flex: 1;
		// padding: 24rpx 12rpx;
		padding: 0 12rpx 24rpx;

		// background-color: #FFF;
		.morelive-item {
			padding: 24rpx 12rpx;
			background-color: #ffffff;
			border-radius: 16rpx;

			&+.morelive-item {
				margin: 24rpx 0;
			}
		}

		.live-commodity {
			font-size: 36rpx;
			font-weight: 600;
			width: 120rpx;
			margin-left: 24rpx;

			.live-img {
				width: 120rpx;
				height: 120rpx;
			}

			.price {
				text-align: center;
			}
		}

		.more-discount {
			margin-left: 24rpx;
			font-size: 28rpx;
			font-weight: 600;
			// margin-top: 120rpx;
		}
	}

	// 左右显示
	.list-one {
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-one-item {
			width: 350rpx;
			height: 470rpx;
			font-size: 28rpx;

			.image {
				width: 350rpx;
				height: 360rpx;
			}
		}
	}

	.nowmoew {
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #446DFD;
	}

	// 联动
	.movetop {
		margin: 32rpx auto;
	}

	.cate {
		// position: absolute;
		// top: 105rpx;
		// bottom: 0;
		width: 100%;
		display: flex;
	}

	.cate-title {
		// text-align: center;
		font-size: 32rpx;
		// margin-top: 20rpx;
		line-height: 80rpx;
		position: relative;
		font-weight: 600;
	}

	.cate-title text {
		padding: 0 10px;
		position: relative;
		// color: #999;
	}

	.index-navs {
		width: #{750rpx};
		height: #{100rpx};
		padding: 24rpx 0;
		background: #fff;
	}

	.app-index-navs {
		height: #{80rpx};
		width: #{750rpx};

		.app-scroll {
			height: #{80rpx};
			white-space: nowrap;

			.app-item {
				display: inline-block;
				font-size: #{28rpx};
				text-align: center;
				color: #353535;
				padding: 0 #{20rpx};
				line-height: #{56rpx};
				position: relative;
				background-color: #e5e5e5;
				border-radius: 36rpx;
				margin-left: 36rpx;

				&.active {
					background-color: #d3ddfd;
					color: #446DFD;
				}
			}
		}
	}

	/* 循环 */
	.live-image {
		position: relative;

		.live-img {
			width: 351rpx;
		}

		.tag-box {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
		}

		.tag-box-1 {
			.text {
				background: #22ac38;
			}

			.text-time {
				padding: 12#{rpx} 20#{rpx};
				font-size: 24#{rpx};
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				margin-left: -20rpx;
				border-bottom-right-radius: 30#{rpx};
				border-top-right-radius: 30#{rpx};
				padding-left: 30#{rpx};
			}
		}

		.tag-box-2 {
			.text {
				background: #777777;
			}
		}

		.tag-box-3 {
			.text {
				background: #ff4544;
			}

			.live-icon {
				width: 24#{rpx};
				height: 24#{rpx};
				margin-right: 12#{rpx};
			}
		}

		.round {
			width: 15#{rpx};
			height: 15#{rpx};
			background: #fff;
			border-radius: 50%;
			margin-right: 12#{rpx};
		}

		.text {
			padding: 12#{rpx} 20#{rpx};
			font-size: 26#{rpx};
			// border-top-left-radius: 16#{rpx};
			border-top-right-radius: 30#{rpx};
			border-bottom-right-radius: 30#{rpx};
			z-index: 10;
			color: #fff;
			display: flex;
			align-items: center;
		}
	}

	/* 今日推荐 */
	.betoday {
		position: relative;
		width: 686rpx;
		height: 128rpx;
		margin: 64rpx auto 20rpx;
		background: #342B2A;
		border-radius: 80rpx;
		color: #FFFFFF;
	}

	.betbg {
		position: absolute;
		width: 64rpx;
		height: 62rpx;
		top: 34rpx;
	}

	.betbg.left {
		left: 48rpx;
	}

	.betbg.right {
		right: 48rpx;
	}

	.betbg image {
		width: 64rpx;
		height: 62rpx;
	}

	.betfont {
		text-align: center;
		line-height: 128rpx;
		font-weight: bold;
		font-size: 48rpx;
		letter-spacing: 0.235em;
	}

	.betfont::before {
		content: '';
		width: 48rpx;
		height: 2rpx;
		position: absolute;
		/* border: 2px solid #FFFFFF; */
		background: #FFFFFF;
		left: 136rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.betfont::after {
		content: '';
		width: 48rpx;
		height: 2rpx;
		position: absolute;
		/* border: 2px solid #FFFFFF; */
		background: #FFFFFF;
		right: 136rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	// 猜你喜欢
	.guess {
		width: 686rpx;
		margin: 32rpx;
		height: 398rpx;
		background-color: #FFFFFF;
		color: #333333;
		border-radius: 20rpx;
		padding: 32rpx;
		position: relative;

		.guessit {
			font-size: 36rpx;
			position: absolute;
			z-index: 666;
		}

		.image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	/* 成为合伙人，APP端口 */
	.bepartner {
		width: 686rpx;
		margin: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.bepartnerone {
		width: 328rpx;
		height: 222rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.image {
			width: 328rpx;
			height: 150rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			height: 72rpx;
			line-height: 36rpx;
			padding: 10rpx 16rpx;
			color: rgba($color: #000000, $alpha: 0.84);
			font-size: 24rpx;
		}
	}

	// 视频
	.superior {
		width: 686rpx;
		// height: 350rpx;
		margin: 24rpx auto;
		position: relative;

		.image {
			width: 100%;
			// height: 350rpx;
		}

		.play {
			position: absolute;
			/* width: 80rpx;
			height: 80rpx;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%); */
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			right: 30rpx;
		}

		.status {
			width: 328rpx;
			height: 48rpx;
			border-radius: 0 40rpx 40rpx 0;
			padding: 0 0 0 156rpx;
			text-align: center;
			background: rgba(0, 0, 0, .4);
			position: absolute;
			left: 0;
			top: 16rpx;
			color: #FFFFFF;
			font-size: 20rpx;
			line-height: 50rpx;

			.notice {
				font-size: 24rpx;
				width: 156rpx;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				text-align: center;
				background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
				border-radius: 0 96rpx 96rpx 0;
			}
		}
	}

	// 视频二
	.superiordou {
		width: 686rpx;
		// height: 418rpx;
		margin: 24rpx auto;
		display: flex;
		justify-content: space-between;

		.supertwo {
			width: 328rpx;
			// height: 418rpx;
			position: relative;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;

			.play {
				position: absolute;
				/* width: 80rpx;
				height: 80rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%); */
				width: 40rpx;
				height: 40rpx;
				bottom: 126rpx;
				right: 30rpx;
			}

			.image {
				width: 100%;
				// height: 350rpx;
			}

			.title {
				margin: 8rpx 14rpx 24rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				color: rgba(0, 0, 0, 0.84);
			}

			.status {
				width: 100%;
				height: 48rpx;
				padding: 0 0 0 156rpx;
				text-align: center;
				background: rgba(0, 0, 0, .4);
				position: absolute;
				left: 0;
				top: 16rpx;
				color: #FFFFFF;
				font-size: 20rpx;
				line-height: 50rpx;

				.notice {
					font-size: 24rpx;
					width: 156rpx;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					text-align: center;
					background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
					border-radius: 0 96rpx 96rpx 0;
				}
			}
		}
	}

	// 视频
	.superiall {}



	// 循环
	.beloop {
		// width: 686rpx;
		margin: 48rpx auto 12rpx;
		position: relative;
		/* display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap; */
	}

	.belooprow {
		position: absolute;
		top: 0;
		left: 0;
		margin-bottom: 32rpx;
		width: 350rpx;
		// height: 454rpx;
		background: #FFFFFF;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.belooprow .image {
		width: 100%;
		// height: 470rpx;
		position: relative;

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 208rpx;
				padding: 0 48rpx;
				height: 56rpx;
				border-radius: 130rpx;
				background-color: rgba($color: #000000, $alpha: 0.4);
				backdrop-filter: blur(9px);
				font-size: 28rpx;
				text-align: center;
				line-height: 56rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.status {
			width: 350rpx;
			height: 48rpx;
			padding: 0 0 0 156rpx;
			text-align: center;
			background: rgba(0, 0, 0, .4);
			position: absolute;
			left: 0;
			top: 16rpx;
			color: #FFFFFF;
			font-size: 20rpx;
			line-height: 50rpx;

			.notice {
				font-size: 24rpx;
				width: 156rpx;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				text-align: center;
				background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
				border-radius: 0 192rpx 192rpx 0;
			}
		}
	}

	.belooprow .image .img {
		width: 100%;
		height: 100%;
	}

	.belooprow .title {
		margin: 8rpx 14rpx 24rpx;
		font-size: 12px;
		line-height: 18px;
		color: rgba(0, 0, 0, 0.84);
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
